<template>
	<!-- 单个收藏夹： -->
	<view class="singleFavorite">
		<text class="icon iconfont icon-fanhui myfanhui" @click="back"></text>
		<!-- 主要为两部分:1,上方较大的显示了标题和收藏数量的模块，2，下方列表显示收藏内容 -->
		<view class="singleFavorite-tittle_num">
			<view class="container">
				<text class="name">{{target.name}}</text>
				<text class="contents">{{target.contents}}个收藏内容</text>
			</view>
		</view>
		<view class="singleFavorite-contentList">
			<!-- 单个收藏内容: -->
			<view class="single" v-for="(item,index) in collects" :key="index" @click="goMyCollect(index)">
				<text class="tittle">{{item.title}}</text>
				<view class="content">
					{{item.content}}
				</view>
				<text>作者: <text class="author">{{item.userName}}</text></text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		goDetail
	} from '@/utils/utils.js';
	export default {
		data() {
			return {
				flag: 1,
				thisId: '',
				target: {
					name: '',
					contents: ''
				},
				collects: [{
						id: 4,
						title: 'URL 的链接中 井号#、问号?、连接符& 分别有什么作用？',
						content: `#，井号：表示网页中的一个位置，被称之为锚点，常用于某个网
						页间不同位置的跳转，简单的说就是在一个网页中，URL 不变的情况下，通过
						添加“#buy”的字符在 URL 最后可以跳转到当前网页中已经定义好的锚点（id="bu
						y"）位置；同样#的改变也会增加浏览器的历史记录，也就是说我们可以通过“
						后退”按钮回到上一个位置，而熟悉网页开发的朋友们可能也会用于 ajax 的
						一些操作中，以此来实现不同的访问状态和改变页面访问内容，从而也可以实
						现那种无刷新载入的效果。例如：https://zhan.leiue.com/fanly-mip.htm
						l#buy （访问该链接就可以直接跳转到 Fanly MIP 主题页面的购买位置哦）
						?，号：常用于动态网站，实现不同的参数值而生成不同的页面或者返回不同的
						结果。`,
						userName: 'Coder Xu',
						contentImg: 'https://s2.loli.net/2022/04/28/vUC8RlNHDkxwSX4.jpg',
						visitNumber: 666,
						commentNumber: 10,
						likeNumber: 666
					},
					{
						id: 5,
						title: '前后端学习路线',
						content: `正在光顾 CSDN 的你，好呀，我是沉默王二。上周在欣赏阮一峰
						老师的《科技周刊》时，发现了一个牛逼的学习路线，在 GitHub 上已经标星 
						144k 了，简直火爆。里面不仅涵盖了前端和后端的学习路线，还有运维的学习
						路线。作为一名程序员，如果你还不知道这个学习路线的话，那可就亏大发了。
						这个学习路线原本是作者为他的大学教授绘制的，给学生们看的，后来就开源到了
						 GitHub，希望能够借助社区的力量帮助到更多的编程爱好者。这个学习路线还有
						 配套的视频课程，包含 TCP/UDP、TCP/IP、HTTP 缓存、CDN、DNS 等等，虽然是
						 英文版的，但制作精良，观影体验还是非常不错的。地址如下所示：`,
						userName: '沉默王二',
						contentImg: 'https://s2.loli.net/2022/04/28/vUC8RlNHDkxwSX4.jpg',
						visitNumber: 666,
						commentNumber: 10,
						likeNumber: 666
					}
				]
			}
		},
		onLoad(option) {
			// console.log('传来的参数:',option)
			let res = JSON.parse(option.Obj);
			console.log('单个收藏夹的内容:',res.id);
			this.thisId=res.id;
			this.target.name = res.name;
			this.target.contents = res.num;
			// 根据收藏夹的ID获取其所有内容:
			this.getAllConent();
		},
		methods: {
			goMyCollect(index) {
				// goDetail('./myCollect', 1, this.collects[index].id);
				// 跳转的页面为文章页面:
				goDetail('/subPackages/index/articleDetail/articleDetail',0)
			},
			back() {
				goDetail('', 2, {})
			},
			// 根据传来的收藏夹ID获取当前收藏夹下的有内容:
			getAllConent(){
				let myReq=new Promise((resolve,reject)=>{
					uni.request({
						url: '/user/get/favorites/essay',
						method: 'POST',
						data: {
							favoritesId: this.thisId
						},
						success: (res) => {
							resolve(res)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
				myReq.then(res=>{
					console.log('当前收藏夹下的所有内容:',res)
					// 赋值给本地的数据:
					this.collects=res.data.data;
				}).catch(err=>{
					console.log('返回错误:',err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.singleFavorite {
		position: relative;

		.myfanhui {
			position: absolute;
			top: 10%;
			left: 5%;
		}

		&-tittle_num {
			display: flex;
			height: 400rpx;
			background-color: #e9ccd3;
			flex-direction: column;
			
			.container {
				display: flex;
				flex-direction: column;
				margin-top: 32%;
				margin-left: 20rpx;

				.name {
					font-size: 50rpx;
					font-weight: bold;
					margin-bottom: 15rpx;
					color: #eef7f2;
				}

				.contents {
					font-size: 35rpx;
				}
			}
		}

		&-contentList {
			display: flex;
			flex-direction: column;
			background-color: #F4F4F4;
			justify-content: space-around;

			.single {
				display: flex;
				flex-direction: column;
				background-color: white;
				margin-bottom: 20rpx;
				padding: 10rpx;
				justify-content: space-around;

				.tittle {
					// font-weight: bold;
					font-size: 45rpx;
				}

				.content {
					// width: 70%;
					color: silver;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.author {
					font-weight: bold;
				}
			}
		}
	}
</style>
